import styled from "styled-components"
import { NavLink } from "react-router-dom"
const NavWrapper = styled.nav`
	background: #333;
	padding: 1rem;
	text-align: center;
	
	a {
		color: white;
		text-decoration: none;
		margin: 0 1rem;
		padding: 0.5rem 1rem;
		border-radius: 4px;
		
		&:hover {
			background: red;
		}

		&.active {
			background: red;
		}
	}
`;
const HomeHeader = () => {
	return (
		<NavWrapper>
			<NavLink to="/one">One</NavLink>
			<NavLink to="/two">Two</NavLink>
			<NavLink to="/third">Third</NavLink>
		</NavWrapper>
	)
}

export default HomeHeader